<template>
  <div class="map-wrapper">
    <div id="pageDom"></div>
  </div>
</template>

<script>
export default {
  name: "massMarkerAndAreas",
  data(){
    return{
      map:null,
      defaultCenter: [118.765671,32.021186], //南京
      loca: null,
      stationData: [
        { lng: 116.397428, lat: 39.90923, type: "type1" },
        { lng: 116.397128, lat: 39.90923, type: "type2" },
        { lng: 116.407428, lat: 39.91923, type: "type3" },
        { lng: 116.387428, lat: 39.89923, type: "type4" },
        // ...更多数据
      ],
      iconMapping: {
        type1: require('@/assets/img/newCmcc/sf.png'),
        type2: require('@/assets/img/newCmcc/wz.png'),
        type3: require('@/assets/img/newCmcc/hz.png'),
        type4: require('@/assets/img/newCmcc/wd.png'),
      },
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initGaodeMap()
    })

    if (!window.Loca) {
      console.error("Loca 库未加载，请检查 CDN 引入是否正确");
      return;
    }
  },
  methods:{
    initGaodeMap(){
      this.map = new AMap.Map('pageDom', {
        zoom: 4.5, //初始地图级别
        resizeEnable: true,
        center: this.defaultCenter, // 设置中心点
        // mapStyle: 'amap://styles/darkblue' // 使用深色样式
        mapStyle: 'amap://styles/whitesmoke' // 使用深色样式
      });

      this.initLocaLayer();
    },
    initLocaLayer() {
      if (!window.Loca) {
        console.error("Loca 库未加载，请检查 CDN 引入是否正确");
        return;
      }

      this.loca = new Loca.Container({
        map: this.map,
      });

      var pl = window.pl = new Loca.PointLayer({
        zIndex: 10,
        opacity: 1,
        blend: 'normal',
      });

      var geo = new Loca.GeoJSONSource({
        url: 'https://a.amap.com/Loca/static/loca-v2/demos/mock_data/gdp.json',
      });
      pl.setSource(geo);

      var colors = [
        'rgba(254,255,198,0.95)',
        'rgba(255,238,149,0.95)',
        'rgba(255,217,99,0.95)',
        'rgba(255,175,43,0.95)',
        'rgba(255,135,24,0.95)',
        'rgba(234,10,0,0.95)',
        'rgba(195,0,0,0.95)',
        'rgba(139,0,0,0.95)',
      ];

      var style = {
        unit: 'meter',
        radius: (index, f) => {
          var n = f.properties['人口'];
          return n * 100;
        },
        color: (index, f) => {
          var n = Math.min(7, ~~(f.properties['人均GDP'] / 10000));
          return colors[n];
        },
        borderWidth: 0,
        blurRadius: -1,
      }

      pl.setStyle(style)
      this.loca.add(pl);
    }
  }
}
</script>
<style scoped lang="less">

.map-wrapper{
  position: relative;
  height: 100vh;
  width: 100%;


  .bottom{
    position: absolute;
    bottom: 18px;
    z-index: 999999!important;
    left: 50%;
    transform: translateX(-50%);
  }

}
#pageDom{
  width: 100%;
  height: 100%;
}

::v-deep .amap-marker-label{
  background-color: transparent !important;
  border: none !important;
}

::v-deep .amap-copyright{
  display: none !important;
}
::v-deep .amap-logo{
  display: none !important;
}

::v-deep .custom-label{
  position: relative;
  //margin-left: -2px;
  >span{
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    position: absolute;
    top: 4px;
    left: 7px;
  }
}

::v-deep .active-custom-label{
  >span{
    font-weight: 400;
    font-size: 12px;
    color: #FFFFFF;
    position: absolute;
    top: 24px !important;
    left: 30px !important;
  }
}
</style>
